<template>
    <div>
        <p style="font-size: 32px;font-weight: bold;margin-top: 15px;margin-left: 60px;color: #333333;">DDM补录系统平台</p>
        <p style="margin-left: 60px;color: #999999;letter-spacing: 1px;font-size: 12px;margin-top: -4px;}">DDM DATA IMPORT PLATFORM</p>
        <div style="background: #79b5cf;height: 500px;margin-top: 15px"></div>
        <div class="demo-tabs-style1">
            <Tabs type="card" value="res" @on-click="handleTabChange" :animated="false">
                <TabPane label="长安员工" name="res">
                    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                        <FormItem prop="user">
                            <Input v-model="formValidate.user" placeholder="请输入你的帐号">
                                <Icon type="ios-person-outline" slot="prepend"/>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input v-model="formValidate.password" type="password" placeholder="请输入你的密码">
                                <Icon type="ios-lock-outline"  slot="prepend"/>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" long :loading="loadingLogin" @click="handleSubmit('formValidate')">登录</Button>
                        </FormItem>
                    </Form>
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>

<script>
    import crypt from '@/libs/crypt.js'
    export default {
        name: 'login',
        props: {
            msg: String
        },
        data () {
            return {
                formValidate:{
                    user:'',
                    password:'',
                },
                ruleValidate:{
                    user: [
                        { required: true, message: '帐号不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                    ]
                },
                loadingLogin: false,
                type: '1'
            }
        },
        methods: {
            handleTabChange(name) {
                this.type = name === 'res' ? '1' : '0'
            },
            handleSubmit (name) {
                let me=this;
                this.loadingLogin = true
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        // 加密
                        let params = {
                            username: me.formValidate.user,
                            password: crypt.encrypt(me.formValidate.password),
                            userType: this.type
                        };
                        let url='/login';
                        me.$ajax.post(url, {}, {
                            params: params
                        }).then(result => {
                            if (result.status === 200 && result.data.status === 200) {
                                window.localStorage.setItem("token", result.data.data.token)
                                window.localStorage.setItem("userInfo", JSON.stringify(result.data.data))
                                me.$router.push('/main')
                                this.$store.dispatch('login/login')
                                me.$Message.success('登录成功!')
                            }
                            this.loadingLogin = false
                        }).catch(err => {
                            me.$Message.error('登录失败: ' + err.response.data.errorMessage)
                            this.loadingLogin = false
                        })
                    } else {
                        me.$Message.error('请输入必填项!')
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>
<style>
.demo-tabs-style1 {
    position: absolute;
    top:165px;
    right:200px;
    width: 300px;
}
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
    margin-top: -16px;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
    background: #fff;
    padding: 16px;
    border-radius: 0px 5px 5px 5px;
}

.demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
    border-color: transparent;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
    border-color: #fff;
}
</style>

